import React from 'react';
import {
    Input,
    Switch,
    Slider,
    Select,
    Col,
    Radio,
    Checkbox,
    Button,
    DatePicker,
    InputNumber,
    Form,
    Tooltip,
    Icon,
    Row,
    Upload,
    message,
    Modal
} from 'antd';//引入组件

import {
    GetNameValueByValue,
    performanceCurrentFiledRealtionFunctionBYEvent,
    getSimpleValidationRuleForItem,
    getValue,
    setValue
} from '../common/CommonFunction'

import '../../style/theme/layout.css'
import {Compment} from 'react';
import {
    EDITMODE_INPUT,
    EDITMODE_DATE,
    EDITMODE_DROPDOWN,
    EDITMODE_NUMBER,
    DATEFORMAT} from '../common/common'
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

let FormItem = Form.Item;
let Option = Select.Option;






export class BasicFormItem extends React.Component{
    constructor(props){
        super(props);
        let self = this;
        let schema = this.props.schema;
        let finalSelectedItemList = null;
        let selectedItemList = [];

        if (schema.editMode == EDITMODE_DROPDOWN) {
            let value = '';
            if (this.props.intistate[this.props.infosetcode + '_' + schema.code] != undefined) {
                value = this.props.intistate[this.props.infosetcode + '_' + schema.code];
            }
            if (value) {
                let list = schema.selectedItemList;
                let linkValue = '';
                for (let item of list) {
                    if (item.value == value) {
                        linkValue = item.linkValue;
                    }
                }
                for (let item2 of list) {
                    if (item2.linkValue == linkValue) {
                        selectedItemList.push(item2);
                    }
                }
            }
        }        
        
        if (selectedItemList.length == 0) {
            finalSelectedItemList = schema.selectedItemList;
        }
        else {
            finalSelectedItemList = selectedItemList;  
        }     

        this.state = {
            value: this.props.data, previewVisible: false, previewImage: '',
            [this.props.infosetcode + '_' + schema.code + 'SelectedItemList']: finalSelectedItemList,
        };


        this.onChangeSelect = this.onChangeSelect.bind(this);

    }

    onChangeSelect(self, value) {
        let schema = this.props.schema;
        let newSelectedItemList = [];
        if (schema.linkFieldCode) {
            self.props.propform.setFieldsValue({[self.props.infosetcode + '_' + schema.linkFieldCode]: ''});
            let linkSelectedItemList = self.props.rootForm.state[self.props.infosetcode + '_' + schema.linkFieldCode + 'SelectedItemList'].props.schema.selectedItemList;
            for (let item of linkSelectedItemList) {
                if (item.linkValue == value) {
                    newSelectedItemList.push(item);
                }
            }
            self.props.rootForm.state[self.props.infosetcode + '_' + schema.linkFieldCode + 'SelectedItemList'].setState({
                [self.props.infosetcode + '_' + schema.linkFieldCode + 'SelectedItemList']: newSelectedItemList
            });
        }
    }

    onBindRule(functionName, settings) {
        performanceCurrentFiledRealtionFunctionBYEvent(settings.rule,
            functionName, settings.infoSetCode, settings.itemCode,
            settings.rootComponent, settings.currentFormKey,
            getValue, setValue, settings.infoSetCreateDtos
        );
    }


    render(){
        let schema = this.props.schema;
        let self = this;


        if (self.props.rootForm) {
            self.props.rootForm.state[self.props.infosetcode + '_' + schema.code + 'SelectedItemList'] = self;
        }

        let editing = self.props.editing === undefined ? true : self.props.editing;
        let rule = this.props.rule;
        let intiState = this.props.intistate;
        let InfoSetCode = this.props.infosetcode;


        //获取当前字段的各种简单规则
        let currentFieldValidation = getSimpleValidationRuleForItem(rule.validateDict, InfoSetCode, schema.code, schema);
       
        //收集执行事件事件相关信息
        let relationSettings = {
            rule: self.props.rule,
            infoSetCode: InfoSetCode,
            itemCode: schema.code,
            rootComponent: self.props.rootComponent,
            currentFormKey: InfoSetCode,
            infoSetCreateDtos: self.props.infoSetCreateDtos
        };
       
        let defaultValue = schema.defaultValue ? schema.defaultValue : '';
        var currentValue = self.props.isNew ? defaultValue : '';
        if (intiState[InfoSetCode + '_' + schema.code] !== undefined) {
            currentValue = intiState[InfoSetCode + '_' + schema.code]
        }

        let formItem = null;
        const {getFieldDecorator} = this.props.propform;

        switch (schema.editMode) {
            case EDITMODE_INPUT:
                //当前输入文本的正则表达式
                let patternRegex = null;
                if (currentFieldValidation.validateExpression) {
                    patternRegex = new RegExp(currentFieldValidation.validateExpression);
                }

                formItem = editing ? <FormItem>
                    {getFieldDecorator(InfoSetCode + '_' + schema.code, {
                        rules: [
                            {required: currentFieldValidation.isRequired},
                            {pattern: patternRegex},
                            {max: currentFieldValidation.maxLength},
                            {min: currentFieldValidation.minLength}],
                        initialValue: currentValue
                    })(<Input disabled={ !schema.canEdit }
                            onBlur={ self.onBindRule.bind(null, "onblur", relationSettings)}/>)}</FormItem>
                    :
                    (<div span={20}>{currentValue}</div>)
                break;
            case EDITMODE_DATE:

                if (currentValue != undefined) {
                    currentValue = currentValue.substring(0, 10);
                    if (currentValue.length != 10 && currentValue.includes('/')) {
                        var reg = /[\\\/]/g;
                        currentValue = currentValue.substring(0, currentValue.indexOf(" ")).replace(reg, "-");
                    }
                }
                if (self.props.Rows === 2) {
                    if (currentValue == '') {
                        formItem = editing ? <FormItem>
                            {getFieldDecorator(InfoSetCode + '_' + schema.code, {
                                rules: [{required: currentFieldValidation.isRequired}]
                            })
                            (<DatePicker disabled={ !schema.canEdit }
                                         format={DATEFORMAT}/>)}</FormItem> :
                            <div>{currentValue}</div>

                    }
                    else {
                        formItem = editing ? <FormItem>
                            {getFieldDecorator(InfoSetCode + '_' + schema.code, {
                                rules: [{required: currentFieldValidation.isRequired}],
                                initialValue: moment(currentValue, DATEFORMAT)
                            })
                            (<DatePicker disabled={ !schema.canEdit }
                                         format={DATEFORMAT}/>)}</FormItem> :
                            <div>{currentValue}</div>

                    }
                } else {
                    if (currentValue == '') {
                        formItem = (editing ? <FormItem>
                            {getFieldDecorator(InfoSetCode + '_' + schema.code, {
                                rules: [{required: currentFieldValidation.isRequired}]
                            })
                            (<DatePicker disabled={ !schema.canEdit }
                                         format={DATEFORMAT}/>)}</FormItem> :
                            <div>{currentValue}</div>)
                    }
                    else {
                        formItem = editing ? <FormItem>
                            {getFieldDecorator(InfoSetCode + '_' + schema.code, {
                                rules: [{required: currentFieldValidation.isRequired}],
                                initialValue: moment(currentValue, DATEFORMAT)
                            })
                            (<DatePicker disabled={ !schema.canEdit }
                                         format={DATEFORMAT}/>)}</FormItem> :
                            <div>{currentValue}</div>
                    }
                }
                break;
            case EDITMODE_DROPDOWN:
                 //获取下拉列表集合
                 var dropdownList = self.state[InfoSetCode + '_' + schema.code + 'SelectedItemList'];
                 currentValue = editing ? currentValue : currentValue + " " + GetNameValueByValue(currentValue, dropdownList);
                 
                 //默认选项,当下拉框字段为可空字段时,加一项"请选择一项"
                 let defaultItem = [{value:null,name:"请选择一项",linkValue:""}];
                 if(!schema.isRequired){
                     dropdownList = defaultItem.concat(dropdownList);
                 }
                 formItem = editing ? <FormItem>
                     {
                         getFieldDecorator(InfoSetCode + '_' + schema.code, {initialValue: currentValue})
                         (<Select size="large" disabled={!schema.canEdit} placeholder="请选择一项"
                                 showSearch optionFilterProp="children"
                                 filterOption={(input, option) => {
                                     return option.props.children[0].indexOf(input)>=0
                                 }} onSelect={self.onChangeSelect.bind(null, self)}>
                             {
                                 dropdownList.map(function (item, j) {
 
                                     return <Option key={j}
                                                    value={ item.value }>{ item.name} </Option>
                                 })
 
                             }
                         </Select>)}</FormItem> :
                     <div>{currentValue}</div>
                 break;
            case EDITMODE_NUMBER:
                 if (intiState[InfoSetCode + '_' + schema.code]) {
                     currentValue = parseFloat(intiState[InfoSetCode + '_' + schema.code]);
                 }
                 else {
                     if (currentValue)
                         currentValue = parseFloat(currentValue);
                     else
                         currentValue = 0;
                 }
                 formItem = editing ? <FormItem>
                     {getFieldDecorator(InfoSetCode + '_' + schema.code, {
                         rules: [
                             {
                                 type: "number",
                                 required: currentFieldValidation.isRequired,
                                 min: currentFieldValidation.min,
                                 max: currentFieldValidation.max
                             }], initialValue: currentValue
                     })
                     (<InputNumber disabled={!schema.canEdit} onBlur={ self.onBindRule.bind(null, "onchange", relationSettings)}/>)}</FormItem> :
                     <div>{currentValue}</div>
 
                 break;
            default:
            formItem = editing ? getFieldDecorator(InfoSetCode + '_' + schema.code, {initialValue: currentValue})(
                <Input />)
                :
                <div>{currentValue}</div>
            break;
        }


        if (self.props.Rows === 2) {
            return (<Col span={12} className="item">
                <Col span={24} className="" >
                    <div className="name" title={schema.localizationName}>{ schema.localizationName }</div>
                    <Row>
                        <Col span={20} className="value">{formItem}</Col>
                    </Row>
                </Col>
            </Col>);
        } else {
            return (<Col span={8} className="item">
                <Col span={24} className="" >
                    <div className="name" title={schema.localizationName}>{ schema.localizationName }</div>
                    <Row>
                        <Col span={20} className="value">{formItem}</Col>
                    </Row>
                </Col>
            </Col>);
        }


    }

}